<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>打卡记录详情</title>
    <link rel="stylesheet" href="/static/css/combo.select.css">
    <link rel="stylesheet" href="/static/css/button.css">
    <script src="/static/js/jquery-1.11.1.min.js"></script>
    <script src="/static/js/jquery.combo.select.js"></script>
    <script src="/static/js/echarts.min.js"></script>
</head>
<style>
    .greenBg{
        background-color: green;
    }
    .darkgrayBg{
        background-color: darkgray;
    }
    .redBg{
        background-color: red;
    }
    tr{
        text-align: center;
        color: aliceblue;
    }
    td{
        cursor:pointer;
    }
    th{
        color: black;
        background-color: aliceblue;
        width: 100px;
    }
    span{
        font-weight: bold;
    }
    td p {
        margin-top: -25px;
    }
    .overHours{
        margin-top: -15px;
        font-size: 5px;
        color: #DDDDDD;
    }
</style>
<body>
    <div id="main" style="float: left;width:60%;height:800px;margin-top: 100px;margin-left: 200px"></div>
    <div style="float: left;margin-left: 50px">
        <div style="margin-top: 100px">
            <form action="/index">
                <select name="staffId">
                    <option th:each="v:${staffs}" th:value="${v.name}" th:text="${v.name}" th:selected="${v.name == staff.name}">阳熙</option>
                </select>

                <select name="month">
                    <option th:each="v:${months}" th:value="${v}" th:text="${v}" th:selected="${v == month}">2018-07</option>
                </select>

                <input class="button button-highlight button-pill button-large" type="submit" value="查 询">
            </form>
        </div>
        <div style="margin-top: 50px">
            <h3><span th:text="${staff.name}"></span> <span th:text="${month}"></span> 统计信息</h3>
            <p>加班餐补：<span th:text="${total.overTimes}">5</span>次</p>
<!--            <p>加班时长：<span th:text="${total.overHours}">12.5</span>小时</p>-->
            <!--<p>调休增加：<span th:text="${total.freeDays}">5</span>天</p>-->
        </div>
    </div>
    <script type="text/javascript" th:inline="javascript">
        var myChart = echarts.init(document.getElementById('main'));
        var startDate = [[${startDate}]];
        var endDate = [[${endDate}]];
        var option = {
            tooltip: {
                formatter: function (params) {
                    var detail = params.value[6];
                    if (detail == null || detail.length === 0) {
                        return "";
                    }
                    var html = params.value[0]+'详细打卡记录:<br> ';
                    for (var i = 0; i < detail.length; i++) {
                        html = html + detail[i]+'<br>'
                    }
                    return html;
                }
            },
            visualMap: {
                type:'continuous',
                dimension:1,
                show: false,
                min: 0,
                max: 100,
                color: ['red','darkgray','green']
            },
            calendar: {
                orient:'vertical',
                cellSize: 100,
                range: [ startDate,endDate ],
                dayLabel:{
                	nameMap: 'cn',
                	margin:10
                },
                monthLabel: {
                    nameMap: 'cn',
                    align:'center',
                    margin:20
                },
                yearLabel:{
                    show:false
                },
                splitLine:{
                    show:false
                },
                silent:true
            },
            series: [{
                type: 'scatter',
                symbolSize: 1,
                coordinateSystem: 'calendar',
                label: {
                    normal: {
                        show: true,
                        formatter: function (params) {
                            var time = echarts.number.parseDate(params.value[0]);
                            return time.getDate();
                        },
                        textStyle: {
                            color: '#E6E6FA',
                            fontSize:50,
                            fontWeight:800
                        }
                    }
                },
                data: [[${records}]]
            },{
                type: 'scatter',
                coordinateSystem: 'calendar',
                symbolSize: 1,
                label: {
                    normal: {
                        show: true,
                        formatter: function (params) {
                            return params.value[2] || '';
                        },
                        position:[-45,35],
                        textStyle: {
                            fontSize: 14,
                            fontWeight: 700,
                            color: '#fff'
                        }
                    }
                },
                data: [[${records}]]
            },{
                type: 'scatter',
                coordinateSystem: 'calendar',
                symbolSize: 1,
                label: {
                    normal: {
                        show: false,
                        formatter: function (params) {
                            var overHours = params.value[4];
                            if (overHours <= 0) {
                                return "";
                            }
                            return "加班：" + overHours;
                        },
                        position:[-25,20],
                        textStyle: {
                            fontSize: 14,
                            fontWeight: 700,
                            color: '#fff'
                        }
                    }
                },
                data: [[${records}]]
            },{
                type: 'heatmap',
                coordinateSystem: 'calendar',
                data: [[${records}]]
            }]
        };
        myChart.setOption(option);

        $(function() {
            $('select').comboSelect();
        });
    </script>
</body>
</html>